<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Dashboard for Basic Webapp UI</title>	

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<meta http-equiv="Cache-Control" content="no-store"/>
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Expires" content="0"/>
		
		<style type="text/css">
				@import "css/jquery-ui-1.7.2.custom.css";    
				@import "css/main.css";
				@import "css/dashboard/default.css";    
		</style>

		<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script>
		<script type="text/javascript" src="scripts/jquery.livequery.js"></script>
		<script type="text/javascript" src="scripts/jquery.loxia-1.1.min.js"></script>
		
		<script type="text/javascript">
			var $j = jQuery.noConflict();
			
			$j(document).ready(function(){
				loxia.init({debug: true});
				
				$j(".popup").draggable({
	                handle: '.ui-dialog-titlebar',
	                containment: 'document'
	            });
				$j(".popup").bgiframe();
				
				$j(".popup a.ui-dialog-titlebar-close").hover(function(){
					$j(this).addClass("ui-state-hover");
				},function(){
					$j(this).removeClass("ui-state-hover");
				}).click(function(){
					$j(this).parents(".popup").hide();
				});	            
			});	
		</script>

		<style>					
			#loginfobar {float: right; height: 92px;}
			#loginfobar p{color: #FFF; font-size: 0.75em; font-weight: bold; margin-top: 60px; padding: 6px 10px;}
			#portrait-container {width:90px;float:left;padding-top:8px;text-align:center; border: 1px solid #F2F5F7; margin: 2px;}
			#portrait-container.show {border-color: #C0C0C0;}
			#portrait {width:72px;height:92px; vertical-align: middle; margin-left: 6px;}
			#portrait img {border:1px solid #8f8f8f; margin-left: auto; margin-right: auto;}
			#portrait-uploader {height: 20px; margin-top: 2px; background-color: #F2F5F7;}
			#portrait-container.show #portrait-uploader{background-color: #EBEBEB;}
			#portrait-uploader img{cursor: pointer; font-size:11px;display:none;float:right;width:20px;margin-right:5px;line-height:18px;text-indent:-800px;}
			#portrait-container.show #portrait-uploader img{display:block;}
			#personal-info {font-size: 8pt;}
			#personal-info td {padding-left: 6px;}
			#personal-info td.label{padding-left:0px;}
			#personal-info div{margin: 4px; color:#0070A3; font-family:"Arial"; font-style: italic;}
			.content .loxia{font-size: 80%;}
			.content .ui-loxia-table tr{height: 22px;}
			.content .ui-loxia-table th, .content .ui-loxia-table th{line-height: 22px;}
			
			#userlist-table td.col-3 {vertical-align: middle;}
			#userlist-table img {float: left; border: 1px solid transparent; margin: 2px; cursor: pointer;}
			#userlist-table img.hover {border-color: #8f8f8f;}
			a.rtmenu {font-size: 8pt;}
			a.rtmenu, a.rtmenu:visited {color: #EBEBEB;}
			a.rtmenu:hover{color: #FFFF00;}
			a.rtmenu span{padding-right: 18px;}
		</style>
		<script type="text/javascript">		
			var $portrait;
			var $userlistTable;
			$j(document).ready(function(){
				$portrait = $j("#portrait");
				$userlistTable = $j("#userlist-table").data("loxiatable");
				$j(".sidenav .ui-widget-content").each(function(){
						$j(this).data("height",$j(this).height());
					});
				$j(".sidenav .ui-state-active a").hover(function(){
						$j(this).find(".ui-icon-triangle-1-n").removeClass("ui-icon-triangle-1-n").addClass("ui-icon-circle-triangle-n");
						$j(this).find(".ui-icon-triangle-1-s").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-circle-triangle-s");
					},function(){
						$j(this).find(".ui-icon-circle-triangle-n").removeClass("ui-icon-circle-triangle-n").addClass("ui-icon-triangle-1-n");
						$j(this).find(".ui-icon-circle-triangle-s").removeClass("ui-icon-circle-triangle-s").addClass("ui-icon-triangle-1-s");
					});
				$j(".sidenav .ui-state-active a").click(function(){
						var $content = $j(this).parents(".sidenav").find(".ui-widget-content");
						if($content.data("isHidden")){	
							$content.data("isHidden",false);
							//$j(this).find("span.ui-icon-triangle-1-s").removeClass("ui-icon-carat-1-s").addClass("ui-icon-carat-1-n");	
							$j(this).find("span.ui-icon-circle-triangle-s").removeClass("ui-icon-circle-triangle-s").addClass("ui-icon-circle-triangle-n");							
							$content.show();
							$content.animate({height:$content.data("height")},"slow");							
						}else{							
							$content.data("isHidden",true);		
							//$j(this).find("span.ui-icon-triangle-1-n").removeClass("ui-icon-carat-1-n").addClass("ui-icon-carat-1-s");	
							$j(this).find("span.ui-icon-circle-triangle-n").removeClass("ui-icon-circle-triangle-n").addClass("ui-icon-circle-triangle-s");
							$content.hide();															
							$content.animate({height:0},"slow");	
						}
					});
				$j("#portrait-container").hover(function(){
						$j(this).addClass("show");
					},function(){
						$j(this).removeClass("show");
					});
				$j("#portrait-uploader img").click(function(){
					$j('#up-portrait-dlg').loxiadialog("open");
					});
				$j("#userlist-table img").livequery(function(){
						$j(this).hover(function(){
							$j(this).addClass("hover");
						},function(){
							$j(this).removeClass("hover");
					});
					});
			});	
			var upPortraitDlgSettings = {modal: true,
					autoOpen: false,
					width: 400,
					buttons :[{value:"Cancel", 
				   			 func : function(){
			   					$j('#up-portrait-dlg').loxiadialog("close");
			   				 }},
		   					{value:"Upload", 
				   			 func : function(){
	   			 				$j("#uploadForm").submit();
	   			 				$j('#up-portrait-dlg').loxiadialog("close");
			   			 	 }}]
				};
			var deleteUserDlgSettings = {modal: true,
					autoOpen: false,
					resizable: false,
					width: 400,
					buttons :[{value:"Cancel", 
				   			 func : function(){
			   					$j('#delete-user-dlg').loxiadialog("close");
			   				 }},
		   					{value:"Delete", 
				   			 func : function(){
								
	   			 				$j('#delete-user-dlg').loxiadialog("close");
			   			 	 }}]
				};
			var t1Settings = $j.extend({
					url: '/basicwebapp/commons/getusersindesktop.do'
				}, {"itemCount":1,"sort":"u.USER_NAME asc","page":true,"data":[
				{"userName":"Administrator","withInformation":true,"loginName":"admin","habbit":null,"description":null,"withProtrait":true,"uid":1,"system":true,"id":1},
				{"userName":"Carl","withInformation":false,"loginName":"Carl","habbit":null,"description":null,"withProtrait":false,"uid":2,"system":false,"id":2},
				{"userName":"Ben","withInformation":false,"loginName":"Ben","habbit":null,"description":null,"withProtrait":false,"uid":3,"system":false,"id":3}],"pageSize":10,"currentPage":1});
			var t2Settings = $j.extend({
				url: '/basicwebapp/commons/gettodayswork.do',
				emptyMessage: "No work today."
			}, {"itemCount":0,"sort":"","page":false,"data":[],"pageSize":0,"currentPage":1});
			function genUserListOpTd(data){
				var result = "";
				result += '<img title="view user" src="images/test2.gif" onclick="viewUserInfo(' + data.id + ')"></img>';
				result += '<img title="add/modify user information" src="images/pencil.gif" onclick="editUserInfo(' + data.id + ')"></img>';
				if(!data.system)
					result += '<img title="delete user" src="images/trash.gif" onclick="deleteUser(' + data.id + ')"></img>';
				result += '<div class="clearer"><span></span></div>';
				return result;
			}
			function addUser(){
				var oWin = loxia.openPage('user_add.html','useraddwindow',null,[640,400]);
				if(!oWin.opener) oWin.opener = self;
				oWin.focus();				
			}			
			function editUserInfo(userId){
				var oWin = loxia.openPage('user_modify.html','usermodifywindow',null,[640,500]);
				if(!oWin.opener) oWin.opener = self;
				oWin.focus();
			}
			function deleteUser(userId){
				$j('#delete-user-dlg').loxiadialog("open");
			}
			function viewUserInfo(userId){
				$j('#user-info-popup').show();
			}
			function editTodoList(){
				var oWin = loxia.openPage('/basicwebapp/user/maintaintodolistentry.do?acl=ACL_USERMEMO_MAINTAIN','useraddtodowindow',null,[640,400]);
				if(!oWin.opener) oWin.opener = self;
				oWin.focus();
			}
		</script>
	</head>
	<body>
		<div class="container">
			<div class="header">

				<div class="title">
					<h1>Basic Webapp</h1>
				</div>
		
				<div class="navigation">
					<a href="#">Vestibulum</a>
					<a href="#">Suspendisse</a>
					<a href="#">Elemen</a>
					<div class="clearer"><span></span></div>
				</div>		
				
				<div id="loginfobar">
					<p>Current User:&nbsp;<s:property value="userInfo"/>Administrator[admin]&nbsp; <a href="<s:url value='/logout.do'/>">logout</a></p>
				</div>		
			</div>
			<div class="main" id="main">
				<div class="content">
				<div class="ui-state-active ui-corner-top" style="height:16px; margin-bottom: 1px; padding: 2px 6px"><span style="float:left;">Current User List</span>
				<a class="rtmenu" title="Add new users here" href="#" onclick="addUser();return false;" style="float: right;"><span style="background: url('images/plus.png') right bottom no-repeat;">New User</span></a>
				</div>
				<div class="ui-widget ui-widget-content ui-corner-bottom" style="overflow: hidden; padding-bottom: 4px;">
				<table id="userlist-table" loxiaType="table" settings="t1Settings" cellpadding="0" cellspacing="0">
				<thead>
				<tr>
					<th property="userName" sort="u.USER_NAME" style="width:60%">User</th>
					<th property="withInformation" style="width:10%">Info.</th>
					<th property="withProtrait" style="width:10%">Portrait</th>
					<th generator="genUserListOpTd" style="width:20%">Operation</th>
				</tr>
				</thead>
				<tbody></tbody>
				<tbody><tr>
					<td></td><td></td><td></td>
					<td>Put two operations here</td>
				</tr></tbody>
				<tbody></tbody>
				</table>
				<p style="padding: 2px 2px 2px 6px">Why there are so few users. Please add more~~</p>				
				</div>
				</div>
				<div class="sidenav" id="personal-profile">			
					<div class="ui-state-active ui-corner-top" style="height:16px; margin-bottom: 1px; padding: 2px 6px"><span style="float:left;">Personal Profile</span>
					<a href="#" style="float: right;"><span class="ui-icon ui-icon-triangle-1-n"></span></a>								
					</div>
					<div class="ui-widget ui-widget-content ui-corner-bottom" style="overflow: hidden;">
						<div id="portrait-container">
							<div id="portrait"><img src="images/no-photo.gif"/></div>
							<div id="portrait-uploader"><img src="images/newspaper.png"/></div>
						</div>
						<div id="personal-info">
							<table cellpadding="2" cellspacing="2">
								<tr><td class="label">Name:</td></tr><tr><td>Sunny</td></tr>
								<tr><td class="label">Attend Time:</td></tr><tr><td>2009-10-10</td></tr>
								<tr><td class="label">Last Updated Time:</td></tr><tr><td>2010-01-02</td></tr>
								<tr><td class="label">Habbit:</td></tr><tr><td>Hiking, Swimming</td></tr>
							</table>
							<div>&nbsp;&nbsp;&nbsp;&nbsp;This guy has a lot of things to say and all these things are mentioned here. You have to write down them and report it to anyone who has intreast on it and if you don't do this, he will go to your home and hit your head with his beautiful hammer.</div>
						</div>						
					</div>					
				</div>
				<div class="clearer"><span></span></div>			
			</div>
		</div>
		<div class="footer">&copy; 2006 <a href="#">Aixol.com</a>. 
		</div>
		<div loxiaType="dialog" settings="upPortraitDlgSettings" id="up-portrait-dlg" title="Upload Protrait">
			<form id="uploadForm" action='<s:url value="/uploadportrait.do"/>' method="post" enctype="multipart/form-data" target="hiddenIframe">
				<p style="padding-left: 10px; padding-top: 20px;">Please choose your portrait: <input type="file" name="portrait" class="ui-state-default"/></p>
			</form>
		</div>
		<div loxiaType="dialog" settings="deleteUserDlgSettings" id="delete-user-dlg" title="Confirm Dialog">
			<p>Do you confirm to remove this user? User will not be recoved after deletion.</p>
		</div>
		<div id="user-info-popup" class="popup">
			<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable">
			<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
				<span class="ui-dialog-title">User Info</span>
		        <a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button" unselectable="on" style="-moz-user-select: none;">
					<span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;">close</span>
				</a>
	        </div>
	        <div class="ui-dialog-content ui-widget-content">
				<div class="ui-widget ui-widget-content ui-corner-bottom" style="overflow: hidden;">
					<img src="images/no-photo.gif" style="float:left;"/>					
					<div>
						Name:<br/>
						Attend Time:<br/>
						Last Updated Time:<br/>
						Habbit:
					</div>
				</div>
			</div>
		</div>
		<iframe src="/commons/attach_result.jsp" id="hiddenIframe"  name="hiddenIframe" style="display: none;"></iframe>		
	</body>
</html>
